<template>
  <div class="action" >
      <el-button class="cheaback" type="text" icon="el-icon-back" @click="hback"
      >返回</el-button
    >
     <div id="printTest">
      
     <el-row>
      
    <h3>订单状态:{{forchengr(formLabelAlign.status)}}
            <el-button icon="el-icon-printer" class="hidden"
     style="float: right; margin-right:50px; color:#ff7144;border:1px solid #ff7144;padding-left:10px;padding-right:10px;" 
     extraHead="1123" v-print="'#printTest'">订单打印</el-button>
    </h3>
  <el-col :span="7"><div class="grid-content bg-purple">收货人：{{this.list.OrderAddress.name}}</div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple-light">用户昵称：{{formLabelAlign.userNick}}</div></el-col>
  <el-col :span="7"><div class="grid-content bg-purple">手机号码：{{this.list.OrderAddress.phone}}</div></el-col>
   <el-col :span="24"><div class="grid-content bg-purple-dark">收货地址：
    {{this.list.OrderAddress.province+'-'+this.list.OrderAddress.city+'-'+this.list.OrderAddress.county+'-'+this.list.OrderAddress.street}}
    </div>
    </el-col>
  </el-row>
  <div class="conterg"></div>
  <div>
   <vxe-toolbar>
   
          <template #buttons>
            <vxe-button class="hidden" @click="printSelectEvent">打印选中</vxe-button>
            <vxe-button class="hidden" @click="exportSelectEvent">导出选中</vxe-button>
          </template>
        </vxe-toolbar>
       <vxe-table
          border
          show-footer
          ref="xTable"
           :footer-method="footerMethod"
          :data="formLabelAlign.subOrderInfos">
          <vxe-column type="checkbox" width="50"></vxe-column>
            <vxe-column field="commodityTitle" title="商品名称"></vxe-column>
              <vxe-column field="specName" title="商品规格"></vxe-column>
              <vxe-column field="price" title="商品单价"></vxe-column>
            <vxe-column field="number" title="商品件数"></vxe-column>
            <vxe-column field="totalPrice" title="总价"></vxe-column>
            <vxe-column field="" title=""></vxe-column>
               
        </vxe-table>
        </div>
       <el-row class="actionch">
          <el-col :span="6"><div class="grid-content bg-purple"><h4>订单编号:</h4>{{this.listdata.mainOrderId}}</div></el-col>
          <el-col :span="6"><div class="grid-content bg-purple-light"><h4>商品总价：</h4>{{this.listdata.totalPrice}}</div></el-col>
          <!-- <el-col :span="6"><div class="grid-content bg-purple"><h4>运费</h4></div></el-col> -->
      
     <el-col :span="6" v-if="this.listdata.payInfos != null"><div class="grid-content bg-purple-light"><h4>实付款：</h4>{{this.listdata.payInfos[0].amount}}</div></el-col>
     <el-col :span="6" v-else><div class="grid-content bg-purple-light"><h4>实付款：</h4></div></el-col>

     <el-col :span="6" v-if="this.listdata.payInfos != null"><div class="grid-content bg-purple"><h4>付款方式:</h4> {{ufnad(this.listdata.payInfos[0].payChannel)}}</div></el-col>
     <el-col :span="6" v-else><div class="grid-content bg-purple"><h4>付款方式:</h4></div></el-col>

     <el-col :span="6" v-if="this.listdata.payInfos != null"><div class="grid-content bg-purple"><h4>创建时间:</h4>{{this.listdata.payInfos[0].payTime}}</div></el-col>
     <el-col :span="6" v-else><div class="grid-content bg-purple"><h4>创建时间:</h4></div></el-col>

     <el-col :span="6"><div class="grid-content bg-purple-light"><h4>付款时间:</h4>{{this.listdata.placeOrderTime}}</div></el-col>
     <el-col :span="6"><div class="grid-content bg-purple"><h4>成交时间:</h4>{{this.listdata.tradeSuccessTime}}</div></el-col>
     <el-col :span="8"><div class="grid-content bg-purple"><h4>备注信息:</h4>{{formLabelAlign.remake}}</div></el-col>

      </el-row>
      </div>

  </div>
</template>

<script>
import {userparticular} from '@/api/roles';
import employeesConst from "@/constant/employees";
const hireTypeMap = {};
employeesConst.hireTyplol.forEach((item) => {
  hireTypeMap[item.payChannel] = item.value;
});
// 状态
const hirepche = {};
employeesConst.hireaitem.forEach((item) => {
  hirepche[item.status] = item.value;
});
export default {
data () {
  return {

    print:{
      id:'printTest',
      popTitle:'&nbsp;',
      extraHead:''
    },
    listdata:{},
    list:{
      OrderAddress:{
        name:'',
        phone:'',
        province:'',
        city:'',
        county:'',
        street:'',
        detail:'',

      }
    },
    formLabelAlign:{
      mainOrderId:'',
      remake:'',
      status:'',
      subOrderId:'',
      totalPrice:'',
      subOrderInfos:[
        {
          commodityId:'',
          commodityHoldUserName:'',
          commodityMainImages:[],
          commodityTitle:'',
          number:'',
          price:'',
          specId:'',
          specName:'',
          subOrderId:''
        }
      ]
    }
  }
},
created(){
  this.loacvgtr()
},

methods:{
 async loacvgtr(){
  this.formLabelAlign = this.$route.query.row;
  const params = new URLSearchParams(); // 创建URLSearchParams数据对象
     params.append("subOrderId",this.formLabelAlign.subOrderId);
    const res = await userparticular(params)
    this.listdata = res.data
     this.list = JSON.parse(this.listdata.extendData)
  },
  // 订单状态渲染
  forchengr(code){
   return hirepche[code]
  },
  // 运费渲染
  ufnad(code){
   return hireTypeMap[code]
  },
  hback(){
      let row = this.formLabelAlign
 this.$router.push({
        path: "/home/particulars",
        query: { row },
      });
  },
     printSelectEvent () {
              this.$refs.xTable.print({
                data: this.$refs.xTable.getCheckboxRecords()
              })
            },
              exportSelectEvent () {
              this.$refs.xTable.exportData({
                data: this.$refs.xTable.getCheckboxRecords()
              })
            },
             meanNum (list, field) {
              let count = 0
              list.forEach(item => {
                count += Number(item[field])
              })
              return count
            },
              footerMethod ({ columns, data }) {
                const footerData = [
                  columns.map((column, _columnIndex) => {
                 
                  if (_columnIndex === 0) {
                    return '总价'
                  }
                  if (['totalPrice'].includes(column.property)) {
                    return this.meanNum(data, 'totalPrice')
                  }
                  return null
                }),
              ]
              return footerData
            }
}
}
</script>

<style scoped>
  .el-image{
       width: 40%;
       overflow: inherit;
  }
  .accone{
    line-height: 70px;
  }
.action{
  background-color: #fff;
  padding-left: 15px;
}
  h3{
    color: #ff7144;
  margin: 15px;
  font-size: 16px;
  }
 .el-col {
    border-radius: 4px;
   margin: 10px 0px 10px 8px;
   font-size: 14px;
  }
  
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .el-col-1{
    width: 3%;
  }
  .actionch{
    color: #7d7f82;
  }
  h4{
    display: inline-block;
  }
  .conterg{
    width: 95%;
    margin-left: 0;
    border-bottom: 1px solid #E3E5E8;
  }
  .el-col-6{
    margin-bottom: 0 !important;
    margin-top: 0 !important;
  }
  /* 打印 */
  @media print {
  .hidden{
      display: none;
  }
  /*最外层打印节点*/
    #printTest {
    display:block;
    height: auto;
    overflow: hidden;
  }

 ::v-deep .vxe-table--body-wrapper{
  width: 100% !important;
  overflow: hidden !important;
 }
 ::v-deep .vxe-table--footer-wrapper{
  overflow: hidden;
 }
  ::v-deep .vxe-checkbox--icon{
    display: none !important;
  }
  @page{
      size:  auto;
     margin: 2mm;
  }
}
.type--button:hover{
color: #ff7144 !important;
}
.type--button:focus{
border: 1px solid #ff7144 !important;
}
.vxe-table--render-default{
  margin-bottom: 20px !important;
}

 ::v-deep .vxe-table--render-default .vxe-cell--checkbox:hover .vxe-checkbox--icon{
    color: #ff7144 !important;
  }

::v-deep .is--checked.vxe-cell--checkbox .vxe-checkbox--icon{
  color: #ff7144 !important;
}
::v-deep .vxe-table--render-default .is--indeterminate.vxe-cell--checkbox .vxe-checkbox--icon{
  color: #ff7144 !important;
}


::v-deep .el-icon-printer{
  font-size: 18px !important;
}
</style>